<template>
  <!-- 客户信息 -->
  <div>
    <el-table-form ref="form" class="form" :model="query">
      <el-form-item :table-form-merge="1.5" class="merge-item">
        <el-select v-model="query.type" style="width: 200px;">
          <el-option label="电话" value="contactPhone" />
          <el-option label="客户编号" value="csmCode" />
          <el-option label="客户名称" value="csmName" />
          <el-option label="地址" value="csmAddress" />
        </el-select>
        <el-input v-model.trim="query.csmText" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item class="merge-item" label="状态" prop="csmStatus">
        <el-select v-model="query.status" clearable placeholder="请选择">
          <el-option value="1" label="未审核" />
          <el-option value="2" label="已审核" />
        </el-select>
      </el-form-item>
      <el-form-item class="merge-item">
        <el-checkbox v-model="checked">在全部分类中查找</el-checkbox>
      </el-form-item>
      <template v-slot:btns>
        <el-button type="primary" icon="el-icon-search" @click="fetchData({})">查询</el-button>
      </template>
    </el-table-form>

    <div style="margin-bottom: 20px;">
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addClient">新增客户</el-button>
      <el-button type="primary" @click="audit">审核</el-button>
      <el-button type="primary" @click="move">移动</el-button>
      <el-button type="primary" @click="deleteCsm">删除</el-button>
    </div>

    <lb-table
      ref="lbTable"
      v-el-height-adaptive-table="{bottomOffset:10}"
      v-loading="$loadingPlugin.fetchData"
      class="table"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
      align="center"
      @selection-change="handleSelectionChange"
      @fetch="fetchData"
    />

    <moveClient ref="moveClient" />
    <addClient ref="addClient" />
  </div>
</template>

<script>
  import MoveClient from './MoveClient'
  import AddClient from './AddClient'
  import { priceCategoryCsmList, queryPriceTypeDeletecsm, queryPriceTypePriceAudit } from '@/api'

  export default {
    name: 'customerInformation',
    components: {
      MoveClient, AddClient
    },
    props: {
      priceCgId: {
        type: Number,
        default: 0
      },
      priceTypeDetail: {
        type: Object
      }
    },
    data() {
      return {
        csmTypeMap: [
          { 'value': 1, 'desc': '居民用户', 'key': 'Resident_user' },
          { 'value': 2, 'desc': '商业用户', 'key': 'Business_user' },
          { 'value': 4, 'desc': '工业用户', 'key': 'GY_user' },
          { 'value': 8, 'desc': '瓶批用户', 'key': 'BOTTLE_user' },
          { 'value': 16, 'desc': '槽批用户', 'key': 'GROOVE_user' }
        ],
        txt: '',
        selectTableList: [],
        checked: false,
        query: {
          csmText: null,
          type: 'contactPhone'
        },
        tableData: {
          total: 0,
          column: [
            {
              type: '',
              width: 50,
              fixed: 'left',
              render: (h, { row }) => <i onClick={() => this.changLeftTable(row)} style='font-size:18px;cursor:pointer' class='el-icon-link'></i>
              // el-icon-paperclip
            },
            // {
            //   prop: 'priceCgId',
            //   width: 40,
            //   fixed: 'left',
            //   render: (h, { row }) => <i class='el-icon-link'></i>
            // },
            {
              type: 'selection',
              prop: 'csmId',
              fixed: 'left'
            },
            {
              prop: 'status',
              label: '状态',
              width: 80,
              fixed: 'left',
              render: (h, { row }) => <span>{ row.status === 1 ? '未审核' : '已审核' }</span>
            },
            {
              prop: 'csmCode',
              label: '客户编号',
              width: 160,
              fixed: 'left'
            },
            {
              prop: 'csmName',
              label: '客户名称',
              width: 110,
              fixed: 'left'
            },
            {
              prop: 'contactPhone',
              label: '电话',
              width: 110
            },
            {
              prop: 'priceCgName',
              label: '价格分类名称',
              width: 180
            },
            {
              prop: 'orgName',
              label: '所属机构',
              width: 160
            },
            {
              prop: 'orgScope',
              label: '生效范围',
              width: 110,
              render: (h, { row }) => <span>{ row.orgScope === 1 ? '不限' : row.scopeOrgName}</span>
            },
            {
              prop: 'csmType',
              label: '客户类型',
              width: 130,
              render: (h, { row }) => <span>{row.csmType && this.csmTypeMap.find(v => row.csmType === v.value) ? this.csmTypeMap.find(v => row.csmType === v.value).desc : ''}</span>
            },
            {
              prop: 'csmAddress',
              label: '地址',
              width: 200
            }
            // {
            //   label: '操作',
            //   align: 'center',
            //   fixed: 'right',
            //   width: 150,
            //   render: (h, { row, $index }) => {
            //     return (
            //       <div>
            //         <el-link size='mini' onClick={() => this.audit(row, $index)}>
            //           审核
            //         </el-link>
            //         <el-link size='mini' type='danger' onClick={() => this.del(row, $index)}>
            //           删除
            //         </el-link>
            //       </div>
            //     )
            //   }
            // }
          ],
          data: []
        }
      }
    },
    mounted() {
      this.$bus.$on('refreshPriceAdd', () => {
        this.fetchData({})
      })
    },
    methods: {
      async fetchData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          currentPage,
          pageSize,
          selectAll: this.checked,
          status: this.query.status,
          priceCgId: this.priceCgId
        }
        params[this.query.type] = this.query.csmText
        const res = await priceCategoryCsmList(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      // 新增客户
      addClient(row) {
        if (!this.priceCgId) {
          this.$message.error('请先选择左侧的价格分类')
          return
        }
        this.$refs.addClient.open(this.priceTypeDetail)
      },
      // 移动
      move() {
        if (!this.selectTableList.length) {
          this.$message.error('请选择客户')
          return
        }
        this.$refs.moveClient.open(this.selectTableList)
      },
      // 审核
      async   audit() {
        if (!this.selectTableList.length) {
          this.$message.error('请选择客户')
          return
        }
        var list = this.selectTableList.map(l => {
          return { csmId: l.csmId, priceCgId: l.priceCgId }
        })
        const res = await queryPriceTypePriceAudit(list)
        if (res.success) {
          this.$message.success('审核成功')
          this.fetchData({})
        }
      },
      // 删除
      deleteCsm() {
        if (!this.selectTableList.length) {
          this.$message.error('请选择客户')
          return
        }
        this.$confirm('确认要删除吗？', '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          var list = this.selectTableList.map(l => {
            return { priceCgId: l.priceCgId, csmId: l.csmId }
          })
          const res = await queryPriceTypeDeletecsm(list)
          if (res.success) {
            this.$message.success('删除成功')
            this.fetchData({})
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      handleSelectionChange(val) {
        console.log(val)
        this.selectTableList = [...val]
      },
      changLeftTable(row) {
        this.$emit('changeTable', row.priceCgId)
      }
    }
  }
</script>

<style lang='scss' scoped>
  .form {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    // & /deep/ .el-form-item {
    //   .el-form-item__content > .el-select {
    //     width: 100%;
    //   }
    // }
    // .block {
    //   width: 100%;
    // }
  }
</style>
